<template><div><h1 id="drag-dnd" tabindex="-1"><a class="header-anchor" href="#drag-dnd"><span>drag-dnd</span></a></h1>
<h2 id="快速开始" tabindex="-1"><a class="header-anchor" href="#快速开始"><span>快速开始</span></a></h2>
<p><a href="https://www.vue3-dnd.com/guide/components/dnd-provider.html" target="_blank" rel="noopener noreferrer">官方网站</a></p>
<h2 id="api" tabindex="-1"><a class="header-anchor" href="#api"><span>API</span></a></h2>
<h3 id="usedrag" tabindex="-1"><a class="header-anchor" href="#usedrag"><span>useDrag</span></a></h3>
<p>输入参数描叙</p>
<ol>
<li>type[必填]: 指定了拖拽元素的类型，比如我们可以通过设置 box 和 layout 来区分当前的拖拽体是一个组件还是一个容器,初始化时设置好的</li>
<li>item: 用作对象，用来标识当前拖动源，或者用作一个函数，它在拖动操作开始时被触发并返回一个表示拖动操作的对象。如果返回 null，则取消拖动操作。</li>
<li>collect: 能实时的获取拖动过程中拖拽体元素的状态,</li>
</ol>
<table>
<thead>
<tr>
<th>Key</th>
<th>必填</th>
<th>类型</th>
<th>说明</th>
<th>个性化描叙</th>
</tr>
</thead>
</table>
<p>| type| 是 | string or symbol |拖拽元素的类型 | |
| item | 是 | object | () =&gt; object | 对象时，它是一个描述被拖动数据的纯 JavaScript 对象。
这是拖放目标唯一可用的关于拖动源的信息，因此选择他们需要知道的最少数据很重要。您可能很想在此处放置一个复杂的引用，但您应该尽量避免这样做，因为它会耦合拖动源和放置目标。使用类似的东西是个好主意{ id }。
函数时，它在拖动操作开始时被触发并返回一个表示拖动操作的对象。如果返回 null，则取消拖动操作。| |
| collect | 否 | (monitor: DragSourceMonitor) =&gt; CollectedProps | 一个收集器的函数。它应该返回一个普通对象并成为 useDrag 返回值中的第一个项。| 能够外部获取拖拽体元素的变化|
| end | 否 | (draggedItem: object, monitor: DragSourceMonitor) =&gt; void | 当拖动停止时，end 函数会被调用。
你可以调用 monitor.didDrop()以检查本次拖拽是否成功；如果它成功，并且放置目标通过从其 drop()方法返回一个普通对象来指定放置结果，那么它将作为 monitor.getDropResult()的返回值。
这个方法是处理数据变化的好地方。 | 1. 不管拖动成功与否都会回调 2. 通过 monitor.didDrop()来检查是否拖动成功 3. draggedItem: 当前拖动元素的item值 4. 在拖拽容器内的drop方法中重新定义一个返回体结构，然后再drag中可以通过 monitor.getDropResult()来获得drop中定义的返回体
| canDrag | 否 | boolean | (monitor: DragSourceMonitor) =&gt; boolean | 你可以使用它来指定当前是否允许拖动。默认为 true。如果您想禁用基于某些条件的拖动，则指定一个函数会很便捷。注意：你不能在这个方法内部调 monitor.canDrag()
| isDragging | 否 | boolean | (monitor: DragSourceMonitor) =&gt; boolean | 默认情况下，只有发起拖动操作的拖动源才被认为是拖动的。你可以通过定义自定义一个 isDragging 方法来覆盖此行为。它可能会返回类似 props.id === monitor.getItem().id。
注意：你不能在这个方法内部调用 monitor.isDragging()。</p>
<p>返回体:
useDrag 返回一个数组，包含三个值：collect 函数的返回值，dragSource 和 dragPreview 的连接器函数</p>
<p>collect: 它是一个 Ref 对象，它的 value 指向 collect 函数的返回值，如果没有定义 collect 函数，它的 value 就是一个空对象
dragSource： dom 元素的引用
dragPreview: 拖拽预览的连接器函数。它是可选的，默认使用 dragSource 作为预览元素，接收一个 Ref<HTMLElement> | HTMLElement 的可拖拽 DOM 元素；</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> getEmptyImage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-dnd-html5-backend"</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>collectedProps<span class="token punctuation">,</span> dragSource<span class="token punctuation">,</span> dragPreview<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useDrag</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"BOX"</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token literal-property property">item</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"1"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">dragPreview如果不设置，默认情况下是拖拽组件的样式</span>
<span class="line"></span>
<span class="line"><span class="token comment">// 可以通过在onMounted时初始化一个空对象，来清空拖拽样式的显示</span></span>
<span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line">  <span class="token function">preview</span><span class="token punctuation">(</span><span class="token function">getEmptyImage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">captureDraggingState</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">//如果要自定义组件的方式，需要通过drawlayout来实现</span></span>
<span class="line"></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="usedrop" tabindex="-1"><a class="header-anchor" href="#usedrop"><span>useDrop</span></a></h2>
<p>useDrop 函数提供了一个拖拽体接收的容器，你可以通过 accpet 指定允许放置的类型(接收的是 userDrag 定义的 type)，通过 item 表示拖动源的数据(接收的 useDrag 里面的 item)，通过 collect 获取拖拽元素的状态等等。</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token operator">&lt;</span>script setup lang<span class="token operator">=</span><span class="token string">"ts"</span><span class="token operator">></span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> useDrop <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue3-dnd'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">[</span>collectedProps<span class="token punctuation">,</span> drop<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useDrop</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">	<span class="token literal-property property">accept</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'BOX'</span><span class="token punctuation">]</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"><span class="token literal-property property">参数</span><span class="token operator">:</span></span>
<span class="line"><span class="token literal-property property">drop</span><span class="token operator">:</span>  当拖拽的元素放手的时候调用<span class="token punctuation">,</span> 可以对拖拽的数据进行二次加工</span>
<span class="line"><span class="token literal-property property">hover</span><span class="token operator">:</span> 当拖拽组件经过组件上时调用该方法<span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span>template<span class="token operator">></span></span>
<span class="line">  <span class="token operator">&lt;</span>div <span class="token operator">:</span>ref<span class="token operator">=</span><span class="token string">"drop"</span><span class="token operator">></span>Drop Target<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="容器的拖拽" tabindex="-1"><a class="header-anchor" href="#容器的拖拽"><span>容器的拖拽</span></a></h2>
<div class="custom-container tip"><p class="custom-container-title">技术要求</p>
<ol>
<li>元素能拖拽到容器中成为子元素</li>
<li>容器移动的时候元素一起移动</li>
<li>子元素能在容器内移动</li>
<li>子元素拖出到容器外时从容器中剥离</li>
</ol>
</div>
<h3 id="元素能拖拽到容器中成为子元素" tabindex="-1"><a class="header-anchor" href="#元素能拖拽到容器中成为子元素"><span>元素能拖拽到容器中成为子元素</span></a></h3>
<ol>
<li>需要满足父容器同时是 drag 和 drop 对象, 能作为容器容纳子元素，同时自己又是一个可拖动的对象</li>
</ol>
<p>拖拽元素的类型：
type: component | element</p>
<ol>
<li>从组件层拖拽到设计器，</li>
</ol>
<h2 id="specification-规范" tabindex="-1"><a class="header-anchor" href="#specification-规范"><span>Specification(规范)</span></a></h2>
</div></template>


